<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div class="layui-fluid">
        <br>
        <br>
        <br>
        <br>
        <div class="layui-row" style="height: 100px">
            <div class="layui-col-md6 layui-col-md-offset3">
                <div style="height: 100px">
                    <a type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-left"></i>
                    </a>
                    <button type="button" class="layui-btn">一个标准的按钮</button>
                    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
                    <a type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-right"></i>
                    </a>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-fluid">流体按钮（最大化适应）</button>
                </div>
            </div>
        </div>
        <h2>主题按钮</h2>
        <div>
            <button class="layui-btn layui-btn-primary layui-border-green">绿色按钮</button>
            <button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
        </div>
        <h2>尺寸按钮</h2>
        <div>
            <button class="layui-btn layui-btn-lg layui-btn-primary layui-border-cyan">大型按钮</button>
            <button class="layui-btn layui-btn-primary layui-border-red layui-btn-sm">小型按钮</button>
            <button class="layui-btn layui-btn-xs layui-btn-disabled">禁用迷你按钮</button>
        </div>
        <h2>圆角按钮</h2>
        <div>
            <button class="layui-btn layui-btn-radius"><i class="layui-icon layui-icon-cellphone"></i>手机</button>
        </div>
        <h2>按钮组</h2>
        <div class="layui-btn-group">
            <button class="layui-btn">增加</button>
            <button class="layui-btn">编辑</button>
            <button class="layui-btn">删除</button>
        </div>
    </div>

    <script>
        layui.use(["jquery"], function () {
           var $ = layui.jquery;
           $(".layui-btn").click(function () {
               // this获取的是DOM对象，如果要转换成jquery对象，需要添加$符号
               console.log(this);
               console.log($(this));
               alert($(this).html());
           });
        });
    </script>
</body>
</html>